<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        img {
            vertical-align: top;
        }

        .ad-wrapper {
            width: 300px;
            /* height: 400px; */
            background-color: grey;
            /* position: fixed;
            right: 5px;
            bottom: 5px; */
            /* display: none; */
        }

        .ad-header {
            font-size: 14px;
            line-height: 30px;
            position: relative;
        }

        .ad-header .ad-close {
            padding: 0 5px;
            background-color: red;
            color: #fff;
            position: absolute;
            right: 0;
            top: 0;
        }

        .ad-content img {
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- <div class="ad-wrapper">
        <div class="ad-header">
            <div class="ad-title">距离广告关闭还有10秒</div>
            <div class="ad-close">x</div>
        </div>
        <div class="ad-content">
            <img src="../images/bzsc-dgbhz-300-250-7-5.gif" alt="">
        </div>
    </div> -->
</body>
<script>
    // 小广告
    // 1. 页面加载完毕 等待5s 小广告显示
    // 2. 倒计时10s后关闭小广告
    // 3. 重复1-2
    // 4. 点击关闭按钮 => 清除小广告  => 重复 1 2 3

    adverLoop(1000, { type: "fixed", left: 5, top: 5 });
    adverLoop(2000, { type: "fixed", right: 5, bottom: 5 });
    adverLoop(3000, { type: "fixed", right: 5, top: 5 });
    adverLoop(4000, { type: "fixed", left: 5, bottom: 5 });

    function adverLoop(delay, options) {

        delay = delay == undefined ? 5000 : delay;
        // options = {type:"fixed",left,top,right,bottom}
        // type: 定位的方式  relative static absolute 
        // left right :水平方向位置
        // top bottom 垂直方向位置

        var t2 = setTimeout(function () {
            // 动态生成 -> 通过DOM创建
            var adWrapper = document.createElement("div");
            adWrapper.setAttribute("class", "ad-wrapper");

            adWrapper.style.position = options.type;

            // 如果option中有left  
            if (options.left != undefined) {
                adWrapper.style.left = options.left + "px";
            }
            if (options.right != undefined) {
                adWrapper.style.right = options.right + "px";
            }
            if (options.top != undefined) {
                adWrapper.style.top = options.top + "px";
            }
            if (options.bottom != undefined) {
                adWrapper.style.bottom = options.bottom + "px";
            }



            // adHeader
            var adHeader = document.createElement("div");
            adHeader.setAttribute("class", "ad-header");
            adWrapper.appendChild(adHeader)

            var adTitle = document.createElement("div");
            adTitle.setAttribute("class", "ad-title");
            adTitle.innerText = `距离广告关闭还有10秒`;
            adHeader.appendChild(adTitle);

            var adClose = document.createElement("div");
            adClose.setAttribute("class", "ad-close");
            adClose.innerText = `x`;
            adClose.onclick = function () {
                clearInterval(t1);
                clearTimeout(t2);
                adWrapper.remove();

                adverLoop(delay, options);
            }
            adHeader.appendChild(adClose);

            // adContent
            var adContent = document.createElement("div");
            adContent.setAttribute("class", "ad-content");
            adWrapper.appendChild(adContent)

            var img = document.createElement("img");
            img.setAttribute("src", "../images/bzsc-dgbhz-300-250-7-5.gif");
            adContent.appendChild(img);

            document.body.appendChild(adWrapper);

            var sum = 10;
            adTitle.innerText = `距离广告关闭还有${sum}秒`;
            var t1 = setInterval(function () {
                sum--;
                adTitle.innerText = `距离广告关闭还有${sum}秒`;
                if (sum <= 0) {
                    clearInterval(t1);
                    adWrapper.remove();
                    adverLoop(delay, options);
                }
            }, 1000)
        }, delay);
    }




</script>

</html>